<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            color: #fff;
            text-align: center;
        }
        #content{
            display: grid;
            grid-template-columns: repeat(8,1fr);
            /*grid-template-rows: repeat(4,60px);*/
            grid-template-rows: repeat(8,minmax(60px,auto));
            max-width: 960px;
            margin: 0 auto;
        }
        .one {
            /*说的是起始线和结束线*/
            grid-column-start: 3;
            grid-column-end: 6;
            grid-row-start: 3;
            grid-row-end: 6;
            background: red;
        }
        /*或者*/
        /*.one {*/
            /*grid-column: 3 / 6;*/
            /*grid-row: 3 / 6;*/
        /*}*/
        /*或者*/
       /*.one {*/
           /*grid-area: 3 / 3 / 6 / 6;*/
       /*}*/
       /*只设置跨度*/
        /*.one{*/
            /*grid-column: span 3;*/
            /*grid-row: span 3;*/
        /*}*/
    </style>
</head>
<body>
<div id="content">
    <div class="one">1</div>
</div>
</body>
</html>